<div *ngIf="isLoading" class="text-center py-5">加载中...</div>
<div *ngIf="!isLoading && transfer">
  <div class="card mb-3">
    <div class="card-body pb-2">
      <div class="d-flex justify-content-between align-items-center mb-2">
        <div>
          <span class="fw-bold fs-5">调拨单号：</span>
          <span class="fs-5">{{ transfer.InventoryTransferNo }}</span>
          <i class="fa fa-copy ms-2" style="cursor:pointer;"></i>
        </div>
      </div>
      <div class="row mb-2">
        <div class="col-md-3">制单时间：{{ transfer.creationTime | date:'yyyy-MM-dd HH:mm:ss' }}</div>
        <div class="col-md-2">单据状态：<span class="text-success">{{ transfer.status || '通过' }}</span></div>
        <div class="col-md-3">&nbsp;</div>
      </div>
      <div class="row mb-2">
        <div class="col-md-2">调拨类型：{{ transfer.inventoryTransferType }}</div>
        <div class="col-md-3">调拨申请日期：{{ transfer.creationTime | date:'yyyy-MM-dd HH:mm' }}</div>
        <div class="col-md-2">调入仓库：{{ transfer.inventoryTransferIN }}</div>
        <div class="col-md-2">调出仓库：{{ transfer.inventoryTransferOUT }}</div>
        <div class="col-md-3">经办人：{{ transfer.inventoryTransferOperator }}</div>
      </div>
      <div class="row mb-2">
        <div class="col-md-6">备注：{{ transfer.remarks }}</div>
        <div class="col-md-2">
          出库状态：<span class="text-warning">未出库</span> 0/{{ getTotalQuantity() }}
        </div>
        <div class="col-md-2">
          入库状态：<span class="text-warning">未入库</span> 0/{{ getTotalQuantity() }}
        </div>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-header pb-0 border-bottom-0">
      <ul class="nav nav-tabs card-header-tabs">
        <li class="nav-item">
          <a class="nav-link" [class.active]="currentTab==='detail'" (click)="currentTab='detail'">调拨明细</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" [class.active]="currentTab==='out'" (click)="currentTab='out'">出库记录</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" [class.active]="currentTab==='in'" (click)="currentTab='in'">入库记录</a>
        </li>
      </ul>
    </div>
    <div class="card-body pt-2">
      <ng-container [ngSwitch]="currentTab">
        <ng-container *ngSwitchCase="'detail'">
          <div class="table-responsive">
            <table class="table table-bordered table-hover align-middle">
              <thead class="table-light">
                <tr>
                  <th><input type="checkbox" /></th>
                  <th>序号</th>
                  <th>货品名称</th>
                  <th>货品编号</th>
                  <th>规格型号</th>
                  <th>单位</th>
                  <th>货品类型</th>
                  <th>调出仓当前库存</th>
                  <th>调入仓当前库存</th>
                  <th>调拨数量</th>
                  <th>调拨单价</th>
                  <th>调拨金额</th>
                  <th>出库状态</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let d of transfer.merchandiseList || transfer.details; let i = index">
                  <td><input type="checkbox" /></td>
                  <td>{{ i + 1 }}</td>
                  <td>{{ d.merchandiseName || d.MerchandiseName }}</td>
                  <td>{{ d.merchandiseNo || d.MerchandiseNo }}</td>
                  <td>{{ d.merchandiseModel || d.MerchandiseModel }}</td>
                  <td>{{ d.merchandiseUnit || d.MerchandiseUnit }}</td>
                  <td>{{ d.merchandiseType || d.MerchandiseType }}</td>
                  <td>{{ d.merchandiseOut || d.MerchandiseOut }}</td>
                  <td>{{ d.merchandiseIN || d.MerchandiseIN }}</td>
                  <td>{{ d.merchandiseNumber || d.MerchandiseNumber }}</td>
                  <td>{{ d.merchandiseINPrice || d.MerchandiseINPrice }}</td>
                  <td>{{ d.merchandisePrice || d.MerchandisePrice }}</td>
                  <td>未出库</td>
                </tr>
              </tbody>
              <tfoot>
                <tr>
                  <td colspan="9" class="text-end">合计：</td>
                  <td>{{ getTotalQuantity() }}</td>
                  <td></td>
                  <td>{{ getTotalAmount() | number:'1.2-2' }}</td>
                  <td></td>
                </tr>
              </tfoot>
            </table>
          </div>
        </ng-container>
        <ng-container *ngSwitchCase="'out'">
          <div>这里是出库记录内容</div>
        </ng-container>
        <ng-container *ngSwitchCase="'in'">
          <div>这里是入库记录内容</div>
        </ng-container>
      </ng-container>
    </div>
  </div>
</div> 